feat(utils): normalize all headings to strip size modifier - #166

Description

This PR scans ids of heading elements for the size modifier (-size-* if the modifier is at the end of the id; size-*- if it's at the beginning of the id) and removes it for the search index.

We remove any size-* modifier in the ids of the h2 elements that sit in the page nav. This results in clean looking id's and urls. So this update makes sure that any heading gets the same treatment on the backend. It was noticed that the indexer is still reading the pre-JavaScript headings that might include size-*. This data (with size-*) then gets stored in the search index, and when a person follows a search result, the anchor link they follow has the size-* modifier. But that is a broken link- it doesn't exist on the page after JS runs.

⚠️ Known accessibility bug: The accessibility fixture tests for the se-input and se-textarea are failing because of the contrast between the updated background color (added in #167 as a hotfix for the Safari issue mentioned there)

Screenshots (if applicable)

🚫 Before

✅ After

Type of change

• Bug fix
• New feature / block
• Refactor
• Docs / content
• Chore (deps, config, tooling)

Related issue(s)

• fixes [Issue Number]

Validation steps

• This PR has code changes, and our linters still pass.
• This PR affects production code, so it was browser tested (see below).
• This PR affects existing pages, so automated E2E tests were run (see below).
• This PR has new code, so new tests were added or updated, and they pass.

To Validate

URL for testing:
https://heading-ids--spectrum-hub--adobe.aem.live/

• Make sure all PR Checks have passed
• Pull down the branch locally or visit the branch preview
• Run npm test and confirm all tests pass
• Run npm run lint and confirm no linting errors
• Verified in browser with aem up

• Run node tools/indexer/index.js --dry-run from the root of the repo. You'll need to have the following in a .env file:

ALGOLIA_APP_ID=(get this from the algolia dashboard for our app)
ALGOLIA_WRITE_API_KEY=(get this from the algolia dashboard for our app)
ALGOLIA_INDEX_NAME=spectrum-docs-dev

• Search for something in the created /out/records.json, like "typography," "button," or "writing."
• Confirm indexer records remove leading size-* modifiers from anchors (as see in the objectID and url)
• Confirm indexer records remove trailing -size-* modifiers from anchors (as see in the objectID and url)
• Search for #size in /out/records.json. There should only be 6 returns, related to the "Sizes" heading/section on the Illustration page and the "Size" section on the Standard panel page.
  • Conversely, running the dry run indexer on main, when you search for #size in your editor, you get over 3500 results back. 😭

Accessibility testing checklist

• Keyboard
  N/A

• Screen reader
  N/A

Device review

• Did it pass in Desktop?
• Did it pass in (emulated) Mobile?
• Did it pass in (emulated) iPad?

Checklist:

• I have signed the Adobe Open Source CLA.
• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have read the CONTRIBUTING document.
• I have added tests to cover my changes.
• All new and existing tests passed.